<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <input type="checkbox" name="nihao" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" checked />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
        <br />
        <button class="toggle1">全选</button>
        <button class="toggle2">反选</button>
        <button class="toggle3">切换</button>

        <script src="./jquery/jquery.min.js"></script>

        <script>
            // 给顶级对象jQuery扩展方法
            jQuery.extend({
                getRandomColor: function () {
                    return `rgb(${parseInt(Math.random() * 256)},${parseInt(
                        Math.random() * 256
                    )},${parseInt(Math.random() * 256)})`;
                },
            });

            // 给元素集 $("selector") 扩展方法
            jQuery.fn.extend({
                // 全选
                selectAll: function () {
                    console.log(this);//k.fn.init... =>这是一个jq对象
                    this.each(function (index, element) {
                      console.log(element); // <input type="checkbox" /> => 这是一个原生JS的input
                      // element是一个原生input对象
                        element.checked = true;
                    });
                },

                // 反选
                selectOpposite: function () {
                    console.log(this);
                    this.each(function (index, element) {
                        element.checked = !element.checked;
                    });
                },

                // 全选/全不选
                selectToggle: function () {
                    // this是12个input的元素集
                    // 查看元素集中的第1个元素的【固有属性】 对其取反 作为所有element的checked的值
                    const shouldCheck = !this.first().prop("checked");

                    this.each(function (index, element) {
                        console.log(element);//<input type="checkbox" />
                        element.checked = shouldCheck
                    });
                },
            });
        </script>

        <script>
            console.log($.getRandomColor());

            $(".toggle1").click(function () {
                $("input[type=checkbox]").selectAll();
            });
            $(".toggle2").click(function () {
                $("input[type=checkbox]").selectOpposite();
            });
            $(".toggle3").click(function () {
                $("input[type=checkbox]").selectToggle();
            });
        </script>
    </body>
</html>
